<template>
  <div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tab_Click">
      <el-tab-pane label="代理日志" name="agentuserlog"></el-tab-pane>
      <el-tab-pane label="网吧日志" name="owneruserlog"></el-tab-pane>
      <el-tab-pane label="用户日志" name="webuserlog"></el-tab-pane>
    </el-tabs>
    <div class="df jc-sb title-btn">
      <div>
        <el-input size="small" v-model="search_inp" @keydown.enter="search_click" placeholder="输入任意字段进行模糊查询" class="input-with-select">
          <template #append>
            <el-button size="small" @click="search_click" :icon="Search" />
          </template>
        </el-input>
      </div>
      <div>
        <el-date-picker v-model="day_model" type="date" placeholder="请选择日期" :disabled-date="disabledDate" :size="'small'" value-format="x" @change="data_change" />
      </div>
    </div>

    <el-table :data="tableData" style="width: 100%;margin-top: 15px;height: 640px;" border>
      <el-table-column prop="ID" label="" width="80" />
      <el-table-column prop="OpTime" label="操作时间" width="180" />
      <el-table-column prop="Op_User" label="操作账号" width="200" />
      <el-table-column prop="OpType" label="操作类型" width="200" />
      <el-table-column prop="OpContent" label="操作内容">
        <template #default="scope">
          {{  scope.row.OpContent || '-'}}
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="is_search" style="margin-top: 10px;" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import http from '../../http'
import { useCounterStore } from '../../current/index'
import { storeToRefs } from 'pinia'
import Pagination from '../components/Pagination.vue'
import { Search } from '@element-plus/icons-vue'
const store = useCounterStore()
const { userInfo } = storeToRefs(store)
const tableData = ref([])
const activeName = ref('agentuserlog')
// 日期前缀
const time_prefix = ref<any>([])
onMounted(async () => {
  // 赋值日期前缀
  time_prefix.value = time(new Date().getTime())
  console.log(time_prefix.value)
  tableData.value = await operat_sql(
    `SELECT * FROM ${time_prefix.value[0].t}${time_prefix.value[0].name} ORDER BY  ${time_prefix.value[0].t}${time_prefix.value[0].name}.ID LIMIT 15 OFFSET 0`,
    'usergloballog'
  )

  console.log(tableData.value)

  //获取总条数
  let total_arr = await operat_sql(
    `SELECT COUNT(*) FROM ${time_prefix.value[0].t}${time_prefix.value[0].name}`,
    'usergloballog'
  )
  total.value = Number(total_arr[0]['COUNT(*)'])
  console.log(total_arr)
})

// 操作数据库 公用方法
const operat_sql = async (sql: string, dbName: string) => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: sql,
      dbName: dbName
    }
  })
  let data = []

  if (res.packageContent.packageMsg == '成功') {
    data = []
  } else {
    data = JSON.parse(res.packageContent.packageMsg)
  }

  console.log(res)

  return data
}

// tabs  tab_Click
const tab_index = ref(0)
const tab_Click = async (tab: any, event: Event) => {
  console.log(tab, event)
  tab_index.value = tab.index

  page.value = 1
  pageSize.value = 15

  tableData.value = await operat_sql(
    `SELECT * FROM ${time_prefix.value[tab.index].t}${time_prefix.value[tab.index].name} ORDER BY ${
      time_prefix.value[tab.index].t
    }${time_prefix.value[tab.index].name}.ID LIMIT 15 OFFSET 0`,
    'usergloballog'
  )

  let total_arr = await operat_sql(
    `SELECT COUNT(*) FROM ${time_prefix.value[tab.index].t}${time_prefix.value[tab.index].name}`,
    'usergloballog'
  )
  total.value = Number(total_arr[0]['COUNT(*)'])
  console.log(total_arr)
}

const page = ref(1) //页码数
const pageSize = ref(15) //每页条数
const total = ref(10)
const handleSizeChange = async (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  // page.value = 1
  // 每页显示的条数
  if ((page.value - 1) * pageSize.value - 1 <= 0) {
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } ORDER BY ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      }.ID LIMIT ${pageSize.value}  OFFSET 0`,
      'usergloballog'
    )
  } else {
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } ORDER BY ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      }.ID LIMIT ${pageSize.value} OFFSET ${(page.value - 1) * pageSize.value}`,
      'usergloballog'
    )
  }
}
const handleCurrentChange = async (val: number) => {
  console.log(`current page: ${val}`)
  page.value = val
  // 当前页码数
  if ((page.value - 1) * pageSize.value - 1 <= 0) {
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } ORDER BY ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      }.ID LIMIT ${pageSize.value}  OFFSET 0`,
      'usergloballog'
    )
  } else {
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } ORDER BY ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      }.ID LIMIT ${pageSize.value} OFFSET ${(page.value - 1) * pageSize.value}`,
      'usergloballog'
    )
  }
}

// 模糊查询
const is_search = ref(true)
const search_inp = ref('')
const search_click = async () => {
  if (search_inp.value == '') {
    is_search.value = true
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } ORDER BY ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      }.ID LIMIT 15 OFFSET 0`,
      'usergloballog'
    )
  } else {
    is_search.value = false
    tableData.value = await operat_sql(
      `SELECT * FROM ${time_prefix.value[tab_index.value].t}${
        time_prefix.value[tab_index.value].name
      } WHERE  ID LIKE '%${search_inp.value}%' OR Op_User LIKE '%${
        search_inp.value
      }%'OR OpType LIKE '%${search_inp.value}%'OR OpContent LIKE '%${search_inp.value}%'`,
      'usergloballog'
    )
  }
  // await get_list(
  //   `SELECT * FROM agentuser WHERE AgentUserName LIKE '%${search_inp.value}%' OR Phone LIKE  '%${search_inp.value}%' OR LoginIP LIKE  '%${search_inp.value}%' OR IDCard LIKE  '%${search_inp.value}%' OR AgentNotice LIKE  '%${search_inp.value}%'`,
  //   "userglobal"
  // );

  let total_arr = await operat_sql(
    `SELECT COUNT(*) FROM ${time_prefix.value[tab_index.value].t}${
      time_prefix.value[tab_index.value].name
    }`,
    'usergloballog'
  )
  total.value = Number(total_arr[0]['COUNT(*)'])
}

//日期
const day_model = ref(new Date().getTime())
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const data_change = async (val) => {
  console.log(val)
  console.log(time(val))
  time_prefix.value = time(val)
 
  //获取总条数
  let total_arr = await operat_sql(
    `SELECT COUNT(*) FROM ${time_prefix.value[0].t}${time_prefix.value[0].name}`,
    'usergloballog'
  )
  total.value = Number(total_arr[0]['COUNT(*)'])

  tableData.value = await operat_sql(
    `SELECT * FROM ${time_prefix.value[0].t}${time_prefix.value[0].name} ORDER BY  ${time_prefix.value[0].t}${time_prefix.value[0].name}.ID LIMIT 15 OFFSET 0`,
    'usergloballog'
  )
}

// 事件格式化
function time(t) {
  var dt = new Date(t)
  var y = dt.getFullYear()
  var m = dt.getMonth() + 1
  var d = dt.getDate()

  m = m < 10 ? '0' + m : m
  d = d < 10 ? '0' + d : d
  // return [`${y}${m}${d}agentuserlog`, `${y}${m}${d}owneruserlog`, `${y}${m}${d}webuserlog`];

  return [
    { name: 'agentuserlog', t: `${y}${m}${d}` },
    { name: 'owneruserlog', t: `${y}${m}${d}` },
    { name: 'webuserlog', t: `${y}${m}${d}` }
  ]
}
</script>

<style scoped>
</style>